/**
 * Created by user on 2017/9/21.
 */
import React,{ Component } from 'react'
import {
    HashRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter,
    Switch
} from 'react-router-dom'

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

const AuthExample = () => (
    <Router>
        <div>
            <AuthButton/>
            <ul>
                <li><Link to="/public">Public Page</Link></li>
                <li><Link to="/protected">Protected Page</Link></li>
            </ul>
            <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route path="/public" component={Public}/>
                <Route path="/login" component={Login}/>
                <PrivateRoute path="/protected" component={Protected}/>
                <Route component={NoMatch}/>
            </Switch>

        </div>
    </Router>
)

const fakeAuth = {
    isAuthenticated: false,
    authenticate(cb) {
        this.isAuthenticated = true
        setTimeout(cb, 100) // fake async
    },
    signout(cb) {
        this.isAuthenticated = false
        setTimeout(cb, 100)
    }
}
const NoMatch = ()=> <h1>NoMatch</h1>;
const Home = ()=> <h1>Home</h1>;
class AuthBtn extends Component{
    render(){
        const { history } = this.props;
        return fakeAuth.isAuthenticated ?
            (<p>
                Welcome!
                <button
                    onClick={() => {
                        fakeAuth.signout(() => history.push('/'))
                    }}
                >
                    Sign out
                </button>
            </p>) :
            (<p>You are not logged in.</p>)
    }
}
const AuthButton = withRouter(AuthBtn);

class PrivateRoute extends Component{
    render(){
        const { component , ...rest } = this.props;
        console.log(rest);
        if(fakeAuth.isAuthenticated){
            return <Route path="/protected" component={Protected}></Route>
        }else{
            return <Route render={(props)=>( <Redirect to={{
                pathname:'/login',
                state:{ from: props.location}
             }}/> )}/>
        }
    }
}
// const PrivateRoute = ({ component: Component, ...rest }) => {
//     console.log('rest',rest);
//     // console.log(Component)
//     // console.log(this.props);
//     return <Route {...rest} render={props => {
//     console.log('props',props);
//         return fakeAuth.isAuthenticated ? (
//       <Component {...props}/>
//     ) : (
//       <Redirect to={{
//         pathname: '/login',
//         state: { from: props.location }
//       }}/>
//     )
//     }}/>
// }

const Public = () => <h3>Public</h3>
const Protected = () => <h3>Protected</h3>

class Login extends React.Component {
    state = {
        redirectToReferrer: false
    }

    login = () => {
        fakeAuth.authenticate(() => {
            this.setState({ redirectToReferrer: true })
        })
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/' } }
        const { redirectToReferrer } = this.state

        if (redirectToReferrer) {
            return (
                <Redirect to={from}/>
            )
        }

        return (
            <div>
                <p>You must log in to view the page at {from.pathname}</p>
                <button onClick={this.login}>Log in</button>
            </div>
        )
    }
}

export default AuthExample
